<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Title</title>
</head>
<body>
<div class="div_1" style="width: 100px;height: 100px;background-color: red"></div>
<br/><br/>
<div class="div_1" style="width: 100px;height: 100px;background-color: yellow"></div>
<br/><br/>
<div class="div_1" style="width: 100px;height: 100px;background-color: blue"></div>
<br/><br/>

<input class="btn_1" type="button" value="淡出fadeOut"><br/><br/>

<input class="btn_2" type="button" value="淡入fadeIn"><br/><br/>

<input class="btn_3" type="button" value="fadeToggle"><br/><br/>

<input class="btn_4" type="button" value="fadeTo"><br/><br/>

<script type="text/javascript">
    $(document).ready(function () {

        $(".btn_1").click(function () {
            $(".div_1").fadeOut("slow", function () {
                console.log("cls_1 fadeOut");
            })
            $(".div_2").fadeOut();
            $(".div_3").fadeOut(1000);
        })

        $(".btn_2").click(function () {
            $(".div_1").fadeIn("slow", function () {
                console.log("cls_1 fadeIn");
            })
            $(".div_2").fadeIn();
            $(".div_3").fadeIn(1000);

        })

        $(".btn_3").click(function () {

            $(".div_1").fadeToggle("slow", function () {
                console.log("cls_1 fadeToggle");
            })
            $(".div_2").fadeToggle();
            $(".div_3").fadeToggle(1000);
        })

        $(".btn_4").click(function () {
            $(".div_1").fadeTo("slow", 0.15, function () {
                console.log("cls_1 fadeTo");
            })
            $(".div_2").fadeToggle(1000, 0.4);
            $(".div_3").fadeToggle(2000, 0.7);
        })
    })


</script>
</body>
</html>